<template>
	<div>
		<head-top></head-top>
		<div class="boxWrap">			
			<div class="details_wrap clearfix">
				<!--删除成功-->
				<div class="alert alert-success alert-dismissable" v-if="success">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
						&times;
					</button>
					{{successTip}}
				</div>
				<!--删除失败-->
				<div class="alert alert-danger alert-dismissable" v-if="error">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
						&times;
					</button>
					{{errorTip}}
				</div>
				<div class="left detail_left_btn">
					<span><router-link :to="{name:'buildStep',params: {key:-1,tem:this.$route.params.id}}">手动建模</router-link></span>
					<span>编辑模板源代码</span>
				</div>
				<div class="right detail_right_info">
					<div class="clearfix data_operation">
						<h3 class="left detail_title">{{templateDetail.title}}</h3>
						<span class="right detail_delete cursor" @click="shareSureTemplate()">分享模板</span>
						<span class="right detail_edit cursor" @click="editSureTemplate()">编辑模板</span>
						<span class="right detail_buy cursor">收藏模板</span>
					</div>
					<p class="data_by_someone text-left">
						<span>由</span><span>{{templateDetail.creator}}</span><span>于</span>
						<span>{{templateDetail.create_time}}</span><span>上传</span>
						<span>100</span><span class="pai">pai</span>
					</p>
					<p class="detail_des text-left p_words">{{templateDetail.description}}</p>
					<div class="detail_status clearfix">
						<p class="detail_upgrade_account left">{{templateDetail.templateType}}</p>
						<p class="left"><span>{{templateDetail.useCount}}</span>次调用</p>
						<!--<p class="left">共<span>details.selled</span>购买</p>-->
						<p class="left" v-if="templateShare">模板<span>分享</span></p>
					</div>				
					<!--历史模板列表-->
					<h3 class="text-left" style="margin-bottom:20px;">模板历史任务</h3>
					<history-temTable></history-temTable>
				</div>
			</div>
		</div>
		<footerHtml></footerHtml>
		<div id="mask" v-if="seen"></div>
		<!--编辑模板的内容-->
		<div class="bomb_box edit_box" v-if="editTemplate">			
			<p class="text-left">
				<span class="data_info_name">模板名称</span>
				<input type="text" class="data_info_name_val editTitle" :value="templateDetail.title"/>
			</p>
			<p class="text-left">
				<span class="data_info_name" style="display: block; float: left;">模板描述</span>
				<textarea name="des" class="data_info_des_val editDes" :value="templateDetail.description"></textarea>
			</p>
			<p class="text-left">
				<span class="data_info_name">隐私性</span>
				<span class="cursor data_info_public" data_visible="0" @click="changeVisible0()" 
					style="margin-left: 12px;padding:6px 26px;border-radius:2px;" :class="{'change_visible':visibleTip1}">公开</span>
				<span class="cursor data_info_private" data_visible="1" @click="changeVisible1()" 
					style="padding:6px 26px;margin-left:20px;border-radius:2px;" :class="{'change_visible':visibleTip2}">私有</span>
			</p>
			<p class="text-left">
				<span class="data_info_name">模板定价</span>
				<input type="number" class="data_info_pai_val editPrice" :value="templateDetail.price"/>
				<span>pai</span>
			</p>
			<p  class="text-right" style="margin-top:40px;">
				<button class="btn data_info_cancel" @click="bombBoxHide()">取消</button>
				<button class="btn data_edit_sure" @click="editSureData()" style="margin-left:40px;">确定更改</button>
			</p>
			<p class="data_info_tip" v-if="seenEditTip" style="font-size: 12px;color: #FF5D30;letter-spacing: 0.79px;">请检查模板信息!</p>
		</div>
	</div>
	
</template>

<script>
	//引入公共模块
	import headTop from '@/components/headTop'
	import historyTemTable from '@/components/historyTemTable'
	import footerHtml from '@/components/footerHtml'
	//api	
	import {urlTemplateDetail,urlEditTemplate,urlListOfHistoryTemplates} from '../../api/api'
export default {
    name: 'TemplateDetails',   
    data(){
    	return {
    		token:localStorage.getItem('token'),
    		templateDetail:{
    			title:'',
    			description:'',
    			creator:'',
    			create_time:'',
    			price:'',  
    			templateType:'',
    			useCount:''
    		},
    		editVis:0,
    		templateShare:false,
    		success:false,
    		error:false,
    		editTemplate:false,
    		seen:false,
    		seenEditTip:false,
    		visibleTip1:false,
    		visibleTip2:false,
    		successTip:'成功',
    		errorTip:'抱歉！'
    		
    		   		
    	}
    },
    components:{
    	headTop,
    	historyTemTable,
    	footerHtml
    },   
    mounted(){ 	
		let	sendData={   		
	  		id:this.$route.params.id
    	};
    	console.log(this.$route.params.id)
	  	urlTemplateDetail(sendData).then(response => {
  			if(response.data.code==200){	  				
  				let resData=response.data.data;
  				console.log(resData.name);
	 			this.templateDetail.title=resData.name;
	    		this.templateDetail.create_time=resData.create_time;
	    		this.templateDetail.creator =resData.creator ;
	    		this.templateDetail.description=resData.description;
	    		this.templateDetail.selled=resData.type ;
	    		this.templateDetail.visible=resData.visible;
	    		this.useCount=resData.use_count;
	    		if(resData.type == 0){
	    			this.templateDetail.templateType='数据预处理';
	    		}
	    		if(resData.visible==0){
	    			this.templateShare=true;
	    			this.visibleTip1=true;
	    		}else{
	    			this.templateShare=false;
	    			this.visibleTip2=true;
	    		};
  			}else if(response.data.code!=200){ 				
  				this.errorTip='获取数据失败';
  				this.deleteError=true;
  			}				    		
     	}).catch(error => {
     		if(error.response.code==401){	
     			localStorage.clear();
        		this.$router.replace('/login');
			}
      });      	
		
    },
    methods: { 
    	bombBoxHide(){
    		this.seen=false;
	    	this.editTemplate=false;
    	},
    	changeVisible0(){
    		$('.data_info_public').addClass('change_visible');
    		this.uploadVis=0;
    		$('.data_info_private').removeClass('change_visible');
    	},
    	changeVisible1(){
    		$('.data_info_private').addClass('change_visible');
    		this.uploadVis=1;
    		$('.data_info_public').removeClass('change_visible');
    	},
    	editSureData(){
			//编辑数据请求
			if($('.editTitle').val() =='' ||  $('.editDes').val()=='' ){
				this.seenEditTip=true;
				return false;
			}else{					
	     		urlEditTemplate({
	     			id:this.$route.params.id,
		            title:$('.editTitle').val(),
		            description:$('.editDes').val(),
		            visible:this.editVis,
		            price:$('.editPrice').val()
	     		}).then(response => {
	     			if(response.data.code==200){
	     				this.seen=false;
						this.editTemplate=false;
	     				this.successTip='修改模板成功',
	     				this.success=true;
	     				let self=this;
	     				setTimeout(function(){
	     					self.$router.push({name:"templateDetail",params:{id:self.$route.params.id}});	
	     				}, 2000);    			
	     			}else{
	     				this.seen=false;
	     				this.editTemplate=false;
	     				this.errorTip='修改模板失败',
	     				this.error=true;
	     			}
	     					
	         	}).catch(error => {
	           	    if(error.response.code==401){
	            		localStorage.clear();
	            		this.$router.replace('/login');
					}
	          	});
			}
				
  		},
    	editSureTemplate(){
    		this.seen=true;
    		this.editTemplate=true;
    	},  
    	shareSureTemplate(){
    		
    	}
		
  	}
}
</script>


<style lang="css">
	@import "../../assets/css/base.css"
</style>
<style lang="css">
	@import "../../assets/css/data_details.css"
</style>
<style lang="css">
	@import "../../assets/css/data_info.css"
</style>